<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="../../resources/css/bootstrap/bootstrap.css">
    <link rel="stylesheet" href="../../resources/css/plugins/dialog/bootstrap-dialog.css"/>
</head>
<body>
<div class="col-sm-6">
    <div class="ibox float-e-margins">
        <div class="ibox-title">
            <h5>弹窗</h5>
            <div class="ibox-tools">
                <a class="collapse-link">
                    <i class="fa fa-chevron-up"></i>
                </a>
                <a class="dropdown-toggle" data-toggle="dropdown" href="notifications.html#">
                    <i class="fa fa-wrench"></i>
                </a>
                <ul class="dropdown-menu dropdown-user">
                    <li><a href="notifications.html#">选项1</a>
                    </li>
                    <li><a href="notifications.html#">选项2</a>
                    </li>
                </ul>
                <a class="close-link">
                    <i class="fa fa-times"></i>
                </a>
            </div>
        </div>
        <div class="ibox-content">
            <div class="alert bg-primary diaSize">
                    多种尺寸
            </div>

            <div class="alert bg-primary diaBtn">
                    多种按钮
            </div>
            <div class="alert bg-primary diaTextare">
                    输入文本
            </div>
            <div class="alert bg-primary  diaHead">
                    表头颜色
            </div>
            <div class="alert bg-primary diaConf">
                    取消确认
            </div>
            <div class="alert bg-primary diaHtml">
                    弹窗页面
            </div>
        </div>
    </div>
</div>
</body>
<script src="../../resources/js/jquery-2.1.1.js"></script>
<script src="../../resources/js/bootstrap/bootstrap.min.js"></script>
<script src="../../resources/js/plugins/dialog/bootstrap-dialog.js"></script>
<script>
    $('.diaSize').on('click',function(){
        BootstrapDialog.show({
            title: '多种尺寸',
            message: 'Hi!',
            buttons: [{
                label: '正常',
                action: function(dialog){
                    dialog.setTitle('正常');
                    dialog.setSize(BootstrapDialog.SIZE_NORMAL);
                }
            }, {
                label: '小',
                action: function(dialog){
                    dialog.setTitle('小');
                    dialog.setSize(BootstrapDialog.SIZE_SMALL);
                }
            }, {
                label: '中',
                action: function(dialog){
                    dialog.setTitle('中');
                    dialog.setSize(BootstrapDialog.SIZE_WIDE);
                }
            }, {
                label: '大',
                action: function(dialog){
                    dialog.setTitle('大');
                    dialog.setSize(BootstrapDialog.SIZE_LARGE);
                }
            }]
        });

    })
    $('.diaBtn').on('click',function(){
        BootstrapDialog.show({
            size: BootstrapDialog.SIZE_LARGE,
            message: 'Hi Apple!',
            buttons: [{
                label: 'Button 1'
            }, {
                label: 'Button 2',
                cssClass: 'btn-primary',
                action: function(){
                    alert('Hi Orange!');
                }
            }, {
                icon: 'glyphicon glyphicon-ban-circle',
                label: 'Button 3',
                cssClass: 'btn-warning'
            }, {
                label: 'Close',
                action: function(dialogItself){
                    dialogItself.close();
                }
            }]
        });
    })
    $('.diaTextare').on('click',function(){
        BootstrapDialog.show({
            title: '标题',
            message: $('<textarea class="form-control" placeholder="请在这里输入文本.."></textarea>'),
            buttons: [{
                label: '确认',
                cssClass: 'btn-primary',
                hotkey: 13, // Enter.
                action: function() {
                    alert('You pressed Enter.');
                }
            }]
        });
    })
    $('.diaHead').on('click',function(){
        var types = [BootstrapDialog.TYPE_DEFAULT,
            BootstrapDialog.TYPE_INFO,
            BootstrapDialog.TYPE_PRIMARY,
            BootstrapDialog.TYPE_SUCCESS,
            BootstrapDialog.TYPE_WARNING,
            BootstrapDialog.TYPE_DANGER];

        var buttons = [];
        $.each(types, function(index, type) {
            buttons.push({
                label: type,
                cssClass: 'btn-default btn-sm',
                action: function(dialog) {
                    dialog.setType(type);
                }
            });
        });

        BootstrapDialog.show({
            title: '改变表头颜色',
            message: '点击下面的按钮',
            buttons: buttons
        });

    })
    $('.diaConf').on('click',function(){
        BootstrapDialog.confirm('请问您需要把它加入购物车吗？');
    })
    $('.diaHtml').on('click',function(){
        BootstrapDialog.show({
            message: $('<div></div>').load('../../500.html')
        });
    })
</script>
</html>